<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FSHD-openrd - 首页</title>
    <script src="https://unpkg.byted-static.com/coze/space_ppt_lib/1.0.3-alpha.12/lib/tailwindcss.js"></script>
    <script src="https://unpkg.byted-static.com/fortawesome/fontawesome-free/6.7.2/js/all.min.js" data-auto-replace-svg="nest"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#969FFF',
                        secondary: '#5147FF', 
                        accent: '#3E3987',
                        dark: '#0F0F23',
                        'dark-card': 'rgba(255, 255, 255, 0.05)',
                        'dark-border': 'rgba(255, 255, 255, 0.1)',
                        'text-primary': '#FFFFFF',
                        'text-secondary': 'rgba(255, 255, 255, 0.7)',
                        'text-muted': 'rgba(255, 255, 255, 0.5)'
                    },
                    backdropBlur: {
                        'xs': '2px',
                    },
                    boxShadow: {
                        'glass': '0 8px 32px 0 rgba(150, 159, 255, 0.1)',
                        'glass-inset': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.05)',
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background: linear-gradient(135deg, #0F0F23 0%, #1A1A3A 50%, #0F0F23 100%);
            min-height: 100vh;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px 0 rgba(150, 159, 255, 0.1);
        }
        
        .glass-nav {
            background: rgba(15, 15, 35, 0.95);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #969FFF, #5147FF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .muscle-ring {
            background: conic-gradient(from 0deg, #969FFF 0deg 126deg, rgba(255, 255, 255, 0.1) 126deg 360deg);
        }
        
        .status-indicator {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .feature-card:hover {
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }

        .notification-modal {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body class="bg-dark text-text-primary overflow-x-hidden">
    <!-- iOS状态栏 -->
    <div id="status-bar" class="flex justify-between items-center px-6 py-2 text-sm text-text-primary">
        <div class="flex items-center space-x-1">
            <span>9:41</span>
        </div>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- 主容器 -->
    <div id="main-container" class="max-w-sm mx-auto bg-transparent min-h-screen pb-20">
        <!-- 顶部用户信息区域 -->
        <header id="header" class="px-6 py-4">
            <div id="user-info" class="flex items-center justify-between">
                <div id="user-profile" class="flex items-center space-x-3">
                    <img id="user-avatar" class="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary object-cover cursor-pointer" src="https://s.coze.cn/image/ya2aI2K_pOI/" alt="张先生头像，可点击上传新图片" data-category="人物">
                    <div id="user-details">
                        <h2 id="user-name" class="text-base font-semibold text-text-primary">张先生</h2>
                        <p id="user-greeting" class="text-xs text-text-secondary">今天也要保持健康哦</p>
                    </div>
                </div>
                <div id="notification-icon" class="relative">
                    <button id="notification-btn" class="w-10 h-10 rounded-full glass-card flex items-center justify-center">
                        <i class="fas fa-bell text-text-secondary"></i>
                        <span id="notification-badge" class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full text-xs"></span>
                    </button>
                </div>
            </div>
        </header>

        <!-- 健康状态概览卡片 -->
        <section id="health-overview" class="mx-6 mb-6">
            <div id="health-card" class="glass-card rounded-xl p-4 cursor-pointer">
                <div id="health-header" class="flex items-center justify-between mb-3">
                    <h3 id="health-title" class="text-base font-semibold text-text-primary">健康概览</h3>
                    <div id="health-status" class="flex items-center space-x-2">
                        <div class="w-2 h-2 bg-green-400 rounded-full status-indicator"></div>
                        <span class="text-xs text-text-secondary">稳定</span>
                    </div>
                </div>
                
                <!-- 肌力雷达图 -->
                <div id="muscle-strength" class="flex items-center justify-center mb-3">
                    <div class="relative w-24 h-24">
                        <div class="muscle-ring w-full h-full rounded-full flex items-center justify-center">
                            <div class="w-16 h-16 bg-dark rounded-full flex flex-col items-center justify-center">
                                <span class="text-xl font-bold gradient-text">4.2</span>
                                <span class="text-xs text-text-muted">平均分</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 快速数据 -->
                <div id="quick-stats" class="grid grid-cols-3 gap-2">
                    <div id="stat-stairs" class="text-center">
                        <div class="text-base font-semibold text-primary">12s</div>
                        <div class="text-xs text-text-muted">爬楼时间</div>
                    </div>
                    <div id="stat-steps" class="text-center">
                        <div class="text-base font-semibold text-secondary">6,842</div>
                        <div class="text-xs text-text-muted">今日步数</div>
                    </div>
                    <div id="stat-days" class="text-center">
                        <div class="text-base font-semibold text-accent">15</div>
                        <div class="text-xs text-text-muted">连续记录</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 风险预警 -->
        <section id="risk-alert" class="mx-6 mb-6">
            <div id="alert-card" class="glass-card rounded-lg p-3 border-l-3 border-yellow-400 cursor-pointer">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded-full bg-yellow-400 bg-opacity-20 flex items-center justify-center">
                        <i class="fas fa-exclamation-triangle text-yellow-400 text-sm"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-medium text-text-primary text-sm">注意</h4>
                        <p class="text-xs text-text-secondary">三角肌肌力略有下降，建议加强训练</p>
                    </div>
                    <button id="alert-action-btn" class="text-yellow-400">
                        <i class="fas fa-chevron-right text-xs"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 核心功能模块 -->
        <section id="features" class="mx-6 mb-6">
            <h3 id="features-title" class="text-base font-semibold text-text-primary mb-3">核心功能</h3>
            <div id="features-grid" class="grid grid-cols-2 gap-3">
                <div id="feature-qna" class="feature-card glass-card rounded-lg p-3 text-center cursor-pointer">
                    <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-question-circle text-primary text-lg"></i>
                    </div>
                    <h4 class="font-medium text-text-primary text-sm mb-1">智能问答</h4>
                    <p class="text-xs text-text-muted">专业知识查询</p>
                </div>
                
                <div id="feature-archive" class="feature-card glass-card rounded-lg p-3 text-center cursor-pointer">
                    <div class="w-10 h-10 rounded-full bg-secondary bg-opacity-20 flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-file-medical-alt text-secondary text-lg"></i>
                    </div>
                    <h4 class="font-medium text-text-primary text-sm mb-1">我的档案</h4>
                    <p class="text-xs text-text-muted">医疗数据管理</p>
                </div>
                
                <div id="feature-manage" class="feature-card glass-card rounded-lg p-3 text-center cursor-pointer">
                    <div class="w-8 h-8 rounded-full bg-accent bg-opacity-20 flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-chart-line text-accent text-sm"></i>
                    </div>
                    <h4 class="font-medium text-text-primary text-sm mb-1">病程管理</h4>
                    <p class="text-xs text-text-muted">肌力趋势分析</p>
                </div>
                
                <div id="feature-community" class="feature-card glass-card rounded-lg p-3 text-center cursor-pointer">
                    <div class="w-8 h-8 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-users text-green-400 text-sm"></i>
                    </div>
                    <h4 class="font-medium text-text-primary text-sm mb-1">患者社区</h4>
                    <p class="text-xs text-text-muted">经验交流分享</p>
                </div>
            </div>
        </section>

        <!-- 个性化推荐 -->
        <section id="recommendations" class="mx-6 mb-6">
            <h3 id="recommendations-title" class="text-base font-semibold text-text-primary mb-3">为您推荐</h3>
            
            <!-- 临床试验匹配 -->
            <div id="trial-recommendation" class="glass-card rounded-lg p-3 mb-3 cursor-pointer">
                <div class="flex items-center justify-between mb-2">
                    <h4 class="font-medium text-text-primary text-sm">临床试验匹配</h4>
                    <span class="px-2 py-0.5 bg-primary bg-opacity-20 text-primary text-xs rounded-full">83%匹配</span>
                </div>
                <p class="text-xs text-text-secondary mb-2">您符合"FSHD基因治疗试验"的主要入组条件</p>
                <button id="trial-detail-btn" class="text-primary text-xs font-medium">查看详情 →</button>
            </div>
            
            <!-- 康复建议 -->
            <div id="rehab-recommendation" class="glass-card rounded-lg p-3 cursor-pointer">
                <div class="flex items-center space-x-2 mb-2">
                    <div class="w-6 h-6 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center">
                        <i class="fas fa-play text-blue-400 text-xs"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-medium text-text-primary text-sm">个性化康复训练</h4>
                        <p class="text-xs text-text-secondary">针对三角肌的3个训练视频</p>
                    </div>
                </div>
                <button id="rehab-start-btn" class="text-blue-400 text-xs font-medium">立即训练 →</button>
            </div>
        </section>
    </div>

    <!-- 通知弹窗 -->
    <div id="notification-modal" class="fixed inset-0 notification-modal z-50 hidden flex items-center justify-center p-6">
        <div class="glass-card rounded-xl p-4 w-full max-w-sm">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-base font-semibold text-text-primary">消息通知</h3>
                <button id="close-notification" class="text-text-muted">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div id="notification-list" class="space-y-3">
                <div class="flex items-start space-x-3 p-2 bg-dark-card rounded-lg">
                    <div class="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                    <div class="flex-1">
                        <p class="text-sm text-text-primary">您的肌力评估数据已更新</p>
                        <p class="text-xs text-text-muted">2小时前</p>
                    </div>
                </div>
                <div class="flex items-start space-x-3 p-2 bg-dark-card rounded-lg">
                    <div class="w-2 h-2 bg-green-400 rounded-full mt-2 flex-shrink-0"></div>
                    <div class="flex-1">
                        <p class="text-sm text-text-primary">新的临床试验匹配结果</p>
                        <p class="text-xs text-text-muted">1天前</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <nav id="bottom-nav" class="fixed bottom-0 left-0 right-0 glass-nav flex justify-around items-center h-14 px-2 z-40">
        <a id="nav-home" href="#" class="flex flex-col items-center p-1 text-primary">
            <i class="fas fa-home text-lg"></i>
            <span class="text-xs mt-0.5">首页</span>
        </a>
        <a id="nav-qna" href="#" class="flex flex-col items-center p-1 text-text-muted">
            <i class="fas fa-question-circle text-lg"></i>
            <span class="text-xs mt-0.5">问答</span>
        </a>
        <a id="nav-archive" href="#" class="flex flex-col items-center p-1 text-text-muted">
            <i class="fas fa-file-medical-alt text-lg"></i>
            <span class="text-xs mt-0.5">档案</span>
        </a>
        <a id="nav-community" href="#" class="flex flex-col items-center p-1 text-text-muted">
            <i class="fas fa-users text-lg"></i>
            <span class="text-xs mt-0.5">社区</span>
        </a>
        <a id="nav-profile" href="#" class="flex flex-col items-center p-1 text-text-muted">
            <i class="fas fa-user text-lg"></i>
            <span class="text-xs mt-0.5">我的</span>
        </a>
    </nav>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 用户头像点击事件
            document.querySelector('#user-avatar').addEventListener('click', function() {
                window.location.href = 'P-SETTINGS.html';
            });

            // 通知按钮点击事件
            document.querySelector('#notification-btn').addEventListener('click', function() {
                document.querySelector('#notification-modal').classList.remove('hidden');
            });

            // 关闭通知弹窗
            document.querySelector('#close-notification').addEventListener('click', function() {
                document.querySelector('#notification-modal').classList.add('hidden');
            });

            // 点击弹窗背景关闭
            document.querySelector('#notification-modal').addEventListener('click', function(e) {
                if (e.target === this) {
                    this.classList.add('hidden');
                }
            });

            // 健康状态卡片点击事件
            document.querySelector('#health-card').addEventListener('click', function() {
                window.location.href = 'P-ARCHIVE.html';
            });

            // 风险预警卡片点击事件
            document.querySelector('#alert-card').addEventListener('click', function() {
                window.location.href = 'P-MANAGE.html';
            });

            // 核心功能模块点击事件
            document.querySelector('#feature-qna').addEventListener('click', function() {
                window.location.href = 'P-QNA.html';
            });

            document.querySelector('#feature-archive').addEventListener('click', function() {
                window.location.href = 'P-ARCHIVE.html';
            });

            document.querySelector('#feature-manage').addEventListener('click', function() {
                window.location.href = 'P-MANAGE.html';
            });

            document.querySelector('#feature-community').addEventListener('click', function() {
                window.location.href = 'P-COMMUNITY.html';
            });

            // 临床试验推荐点击事件
            document.querySelector('#trial-recommendation').addEventListener('click', function() {
                window.location.href = 'P-TRIAL_SQUARE.html';
            });

            // 康复建议点击事件
            document.querySelector('#rehab-recommendation').addEventListener('click', function() {
                window.location.href = 'P-REHAB_SHARE.html';
            });

            // 底部导航栏点击事件
            document.querySelector('#nav-home').addEventListener('click', function(e) {
                e.preventDefault();
                // 已在首页，无需操作
            });

            document.querySelector('#nav-qna').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-QNA.html';
            });

            document.querySelector('#nav-archive').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-ARCHIVE.html';
            });

            document.querySelector('#nav-community').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-COMMUNITY.html';
            });

            document.querySelector('#nav-profile').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-SETTINGS.html';
            });
        });
    </script>
</body>
</html>